<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>明细</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">

    <style>
        .layui-input,.layui-btn{
            height:25px;
            line-height:25px;
            width:250px;
            display: inline;
        }
        .btn{
            background:#d2d2d2;
            border-radius:2px;
            /*color:#fff;*/
            display:inline-block;
            text-align:center;
            text-decoration:none;
            height:28px;
            line-height:28px;
            margin-left:10px;
        }

        .btn1{
            width:65px;
        }

        .btn2{
            width:75px;
        }

        .btn:hover {
            /*background:#3AAB9C;*/
        }

        a{
            font-weight: 500;
            margin-left:15px;
        }
        .table_1{
            border-collapse: separate;
            border-spacing: 15px;
            margin-left: 50px;
        }
    </style>

</head>

<body>
<div style="margin-left: 20px;">
    <div style="margin:5px;">
        <!--操作时间：-->
        <!--<a href="javascript:void(0);" class="btn btn2"  onclick="chooseDate('currMonth');">本月</a>-->
        <!--<a href="javascript:void(0);" class="btn btn2"  onclick="chooseDate('threeMonth');">近三月</a>-->
        <!--<a href="javascript:void(0);" class="btn btn2"  onclick="chooseDate('year');">近一年</a>-->
        <!--<a href="javascript:void(0);" class="btn btn2"  onclick="chooseDate('');">所有</a>-->
        起始月份：
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="start" placeholder="">
        </div>
        结束月份：
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="end" placeholder="">
        </div>
        <a href="javascript:void(0);" class="btn btn2"  onclick="research();">查询</a>
    </div>
    <div style="margin:5px;">
        操作类型：
        <a href="javascript:void(0);" class="btn btn2"  onclick="chooseOpt('');">所有</a>
        <a href="javascript:void(0);" class="btn btn2"  onclick="chooseOpt('use');">领用</a>
        <a href="javascript:void(0);" class="btn btn2"  onclick="chooseOpt('repeatUse');">重复利用</a>
        <a href="javascript:void(0);" class="btn btn2"  onclick="chooseOpt('storage');">入库</a>
    </div>
    <div>
        物资描述：<span id="desc_wz"></span>
    </div>
</div>

<div class="layui-form" style="margin:10px;">
    <table class="layui-table">
        <colgroup>
            <col width="20">
            <col width="120">
            <col width="60">
            <col width="80">
            <col width="80">
            <col width="60">
            <col width="160">
        </colgroup>
        <thead>
        <tr>
            <th></th>
            <th>操作</th>
            <th>库存变动</th>
            <th>变动后库存</th>
            <th>操作时间</th>
            <th>操作工号</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody id="datas">

        </tbody>
    </table>
</div>
<div style="float:right;">
    <div id="pageBar"></div>
</div>


<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.4.1.min.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //存放所有的数据，假分页用到
    var dataArr = new Array();
    var pageSize = 20;
    var total = 0;
    var begin = 0;
    //查询条件
    var opttype = "";

    var laypage;
    var laydate;

    //渲染文件上传组件
    layui.use(['laypage', 'layer','upload','laydate'], function(){
        var $ = layui.jquery;
        laypage = layui.laypage;
        laydate = layui.laydate;

        laydate.render({
            elem: '#start'
            ,type: 'month'
        });
        laydate.render({
            elem: '#end'
            ,type: 'month'
        });

        initTitle();

        research('');
    });

    //初始化物资描述
    function initTitle(){
        $("#desc_wz").html(parent.wz_name);
    }

    //查询
    function research(){
        var desc_wz = parent.wz_name;
        var start = $("#start").val();
        var end = $("#end").val();
        //判断时间
        if(end!="" && start==""){
            layer.open({
                title: '提示'
                ,content: '请选择起始月份'
            });
            return false;
        }
        if(start!="" && end==""){
            layer.open({
                title: '提示'
                ,content: '请选择结束月份'
            });
            return false;
        }
        if(start!="" && end!="" && start>end){
            layer.open({
                title: '提示'
                ,content: '起始月份需要小于结束月份'
            });
            return false;
        }
        $.ajax({
            url: 'query/queryDetailByName',
            type:'post',
            data: {"start":start,"end":end,"opt":opttype,"desc_wz":desc_wz},
            success: function(result){
                result = eval("("+result+")");
                dataArr = result.data;
                total = dataArr.length;
                //展示数据
                showData(1);
                //展示分页
                showPageBar();
            }
        });
    }

    function chooseOpt(opt){
        opttype = opt;
        research();
    }
    //展示分页
    function showPageBar(){
        laypage.render({
            elem: 'pageBar'
            ,count: total //数据总数
            ,limit: pageSize //每页数据量
            ,jump: function(obj){
                //点击分页按钮
                showData(obj.curr);
            }
        });
    }

    //分页展示数据,page:当前页数
    function showData(page){
        begin = (page-1) * pageSize;
        var arr = dataArr.slice(begin,begin + pageSize);
        var html = "";
        var change_count = 0;
        $.each(arr,function(i,obj){
            var opttype = obj.OPT_TYPE;
            var opt = "批量领用";
            if(opttype==1){
                opt="批量入库";
            }else if(opttype==2){
                opt="入库";
            }else if(opttype==3){
                opt="领用";
            }else if(opttype==4){
                opt="重复利用";
            }

            var change = obj.OPT_NUM;
            var font_color = "red";
            if(change>0){
                change = "+"+change;
                font_color = "#00837E";
            }

            var remark = obj.MARK;
            if(typeof(remark) == 'undefined'){
                remark = "";
            }

            html += "<tr>";
            html += "<td>"+ (i+1) +"</td>";
            html += "<td>"+ opt +"</td>";
            html += "<td><font color='"+font_color+"'>"+ change +"</font></td>";
            // html += "<td>"+(parseInt(obj.WZ_STOCK)+parseInt(obj.OPT_NUM))+"</td>";
            html += "<td>"+obj.WZ_STOCK+"</td>";
            html += "<td>"+formateDate(obj.OPT_DATE)+"</td>";
            html += "<td>"+obj.OPT_BY+"</td>";
            html += "<td>"+remark+"</td>";
            html += "</tr>";

            change_count += parseFloat(obj.OPT_NUM);
        });
        //最后一行，合计
        var changeStr = change_count>0 ? "+"+change_count : change_count;
        html += "<tr><td>"+(arr.length+1)+"</td><td style='color: #0000FF'>合计：</td><td>"+changeStr+"</td>";
        html += "<td>-</td><td>-</td><td>-</td><td>-</td></tr>";

        if(arr.length==0){
            html = "<tr><td colspan='7' align='center'>暂无数据</td></tr>";
        }
        $("#datas").html(html);
    }

    function formateDate(time){
        //获取当前日期前n天的日期格式YYYY-MM-DD
        var date = new Date(time);//目标日期
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

</script>

</body>
</html>